apps/webapp/app/components/navigation/SideMenu.tsx (3)

48-49: Nit: Group heroicon imports together.

ExclamationTriangleIcon from @heroicons/react/24/outline is separated from the other @heroicons/react/20/solid imports at lines 1–24. Moving it adjacent to those keeps the import block scannable.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/webapp/app/components/navigation/SideMenu.tsx` around lines 48 - 49, The
ExclamationTriangleIcon import is separated from the other heroicons; move the
import of ExclamationTriangleIcon so it sits next to the other `@heroicons/react`
imports (the existing 20/solid imports) to keep the import block grouped and
scannable—update the import statements at the top of SideMenu.tsx so all
heroicon symbols (including ExclamationTriangleIcon) are adjacent.

---

628-633: Eliminate duplicate useIncidentStatus polling.

Both IncidentStatusPanel (line 602) and V3DeprecationPanel (line 629) independently call useIncidentStatus(), creating two separate 60-second polling intervals. Lift the hook call to the SideMenu parent component and pass hasIncident as a prop to both consumers to avoid the redundant network requests.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/webapp/app/components/navigation/SideMenu.tsx` around lines 628 - 633,
Move the useIncidentStatus() call out of the child components and into the
SideMenu component so polling runs once: remove the useIncidentStatus() calls
from V3DeprecationPanel and IncidentStatusPanel, add a single const {
hasIncident } = useIncidentStatus() in SideMenu, and pass hasIncident down as a
prop to both V3DeprecationPanel and IncidentStatusPanel (update their param
types to accept hasIncident: boolean) so they use the passed value instead of
invoking useIncidentStatus() themselves.

---

603-603: Add clarity to the engine version mapping with a named constant or inline comment.

The isV3={project.engine === "V1"} mapping is correct—engine "V1" represents v3 projects and "V2" represents v4 projects—but the engine/product version mismatch can be confusing. Consider extracting a helper constant like const isV3Project = project.engine === "V1" near the top of the component or adding a brief inline comment to self-document this relationship.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/webapp/app/components/navigation/SideMenu.tsx` at line 603, The V3
deprecation prop is confusing because it passes isV3={project.engine === "V1"};
extract a clearly named boolean (e.g., const isV3Project = project.engine ===
"V1") near the top of the SideMenu component and use isV3={isV3Project} when
rendering V3DeprecationPanel (or, if you prefer not to add a variable, add a
one-line inline comment next to the prop explaining that engine "V1" maps to v3
projects) to make the engine-to-product-version mapping explicit and
self-documenting.

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Learnt from: 0ski
Repo: triggerdotdev/trigger.dev PR: 2994
File: apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables/route.tsx:553-555
Timestamp: 2026-02-03T18:27:49.039Z
Learning: In apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables/route.tsx, the menu buttons (like the Edit button with PencilSquareIcon) intentionally have no text labels - only icons are shown in the TableCellMenu. This is a deliberate UI design pattern for compact icon-only menu items.

Learnt from: matt-aitken
Repo: triggerdotdev/trigger.dev PR: 3019
File: apps/webapp/app/components/primitives/charts/Card.tsx:26-30
Timestamp: 2026-02-11T16:37:32.429Z
Learning: In projects using react-grid-layout, avoid relying on drag-handle class to imply draggability. Ensure drag-handle elements only affect dragging when the parent grid item is configured draggable in the layout; conditionally apply cursor styles based on the draggable prop. This improves correctness and accessibility.

apps/webapp/app/components/navigation/SideMenu.tsx (2)

706-709: Extract hardcoded deprecation dates as named constants.

"1 April 2026" and "1 July 2026" are buried in a JSX string. If the timeline shifts, these require a string-search to find. Named constants at module scope make them easy to locate and update in one place.

♻️ Proposed refactor

+const V3_DEPLOY_STOP_DATE = "1 April 2026";
+const V3_SHUTDOWN_DATE = "1 July 2026";

 function V3DeprecationContent() {
   return (
     <div className="flex flex-col gap-2 rounded border border-amber-500/30 bg-amber-500/10 p-2 pt-1.5">
       ...
       <Paragraph variant="extra-small/bright" className="text-amber-300">
-        This is a v3 project. V3 deploys will stop working on 1 April 2026. Full shutdown is 1 July
-        2026 where all v3 runs will stop executing. Migrate to v4 to avoid downtime.
+        This is a v3 project. V3 deploys will stop working on {V3_DEPLOY_STOP_DATE}. Full shutdown
+        is {V3_SHUTDOWN_DATE} where all v3 runs will stop executing. Migrate to v4 to avoid downtime.
       </Paragraph>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/webapp/app/components/navigation/SideMenu.tsx` around lines 706 - 709,
Extract the hardcoded dates in SideMenu.tsx into module-level named constants
(e.g., V3_DEPLOY_STOP_DATE and V3_FULL_SHUTDOWN_DATE) and replace the inline
strings in the Paragraph JSX (the element using variant="extra-small/bright")
with those constants so future timeline updates only require changing the
constants at the top of the file.

---

639-695: Consider extracting a shared CollapsibleSidePanel primitive to eliminate structural duplication.

V3DeprecationPanel is structurally identical to IncidentStatusPanel: both wrap content in a Popover, animate between a full view and a collapsed icon trigger via two motion.divs, and use the same SimpleTooltip/PopoverTrigger icon pattern. If a third panel is ever added, this triplicate boilerplate will be error-prone to maintain.

A thin shared primitive (accepting isCollapsed, collapsedIcon, tooltipContent, and a children render slot) would eliminate the duplication.

Also a minor nit: Line 690 has className="w-52 !min-w-0 p-0" while the equivalent in IncidentStatusPanel (line 128 of resources.incidents.tsx) is "!min-w-0 w-52 p-0" — inconsistent ordering.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/webapp/app/components/navigation/SideMenu.tsx` around lines 639 - 695,
V3DeprecationPanel duplicates the same Popover + two motion.div collapse/expand
pattern used by IncidentStatusPanel; extract a CollapsibleSidePanel primitive
that accepts props {isCollapsed, collapsedIcon, tooltipContent, children} (or
similar) to render the Popover, the two motion.div states, the
SimpleTooltip/PopoverTrigger icon, and the PopoverContent slot; then refactor
V3DeprecationPanel and IncidentStatusPanel to render CollapsibleSidePanel with
their specific collapsedIcon (ExclamationTriangleIcon), tooltipContent ("V3
deprecation warning"), and children (V3DeprecationContent or incident content);
also normalize the PopoverContent className ordering (use consistent "!min-w-0
w-52 p-0") to match IncidentStatusPanel.

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Learnt from: 0ski
Repo: triggerdotdev/trigger.dev PR: 2994
File: apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables/route.tsx:553-555
Timestamp: 2026-02-03T18:27:40.429Z
Learning: In apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables/route.tsx, the menu buttons (e.g., Edit with PencilSquareIcon) in the TableCellMenu are intentionally icon-only with no text labels as a compact UI pattern. This is a deliberate design choice for this route; preserve the icon-only behavior for consistency in this file.

Learnt from: matt-aitken
Repo: triggerdotdev/trigger.dev PR: 3019
File: apps/webapp/app/components/primitives/charts/Card.tsx:26-30
Timestamp: 2026-02-11T16:37:32.429Z
Learning: In projects using react-grid-layout, avoid relying on drag-handle class to imply draggability. Ensure drag-handle elements only affect dragging when the parent grid item is configured draggable in the layout; conditionally apply cursor styles based on the draggable prop. This improves correctness and accessibility.

apps/webapp/app/components/navigation/SideMenu.tsx (1)

653-695: Hidden PopoverTrigger remains focusable when the sidebar is expanded.

When isCollapsed is false, the collapsed-state motion.div (lines 668-689) animates to height: 0 / opacity: 0 but the PopoverTrigger inside it stays in the DOM and is keyboard-focusable. A user tabbing through the sidebar could activate the popover and see the deprecation content duplicated in a popover alongside the inline panel.

Consider conditionally rendering the collapsed block, or applying aria-hidden and tabIndex={-1} when not collapsed:

Suggested approach

         <motion.div
           initial={false}
           animate={{
             height: isCollapsed ? "auto" : 0,
             opacity: isCollapsed ? 1 : 0,
           }}
           transition={{ duration: 0.15 }}
-          className="overflow-hidden"
+          className="overflow-hidden"
+          aria-hidden={!isCollapsed}
+          {...(!isCollapsed && { inert: "" })}
         >

Alternatively, gate the entire collapsed block with {isCollapsed && (...)} and remove the animation for that direction.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/webapp/app/components/navigation/SideMenu.tsx` around lines 653 - 695,
The collapsed-state panel containing PopoverTrigger stays in the DOM and remains
keyboard-focusable when isCollapsed is false; update the component so the
collapsed block (the motion.div wrapping SimpleTooltip/PopoverTrigger) either is
only rendered when isCollapsed (e.g., gate it with {isCollapsed && (...)} to
remove the element entirely) or, if you keep animation, set accessibility
attributes on the focusable element(s): add aria-hidden="true" and tabIndex={-1}
to the PopoverTrigger (and any focusable children) when isCollapsed is false to
prevent keyboard focus and duplicate popover activation; reference the
motion.div, isCollapsed, PopoverTrigger and SimpleTooltip when making the
change.

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Learnt from: matt-aitken
Repo: triggerdotdev/trigger.dev PR: 3019
File: apps/webapp/app/components/primitives/charts/Card.tsx:26-30
Timestamp: 2026-02-11T16:37:32.429Z
Learning: In projects using react-grid-layout, avoid relying on drag-handle class to imply draggability. Ensure drag-handle elements only affect dragging when the parent grid item is configured draggable in the layout; conditionally apply cursor styles based on the draggable prop. This improves correctness and accessibility.

apps/webapp/app/components/navigation/SideMenu.tsx (1)

711-712: Consider extracting hardcoded deprecation dates to named constants

The dates "1 April 2026" and "1 July 2026" are embedded directly in UI copy. If dates slip or the message needs updating, it requires a text search through JSX. Extracting them makes future changes less error-prone.

♻️ Proposed refactor

+const V3_DEPLOY_DEADLINE = "1 April 2026";
+const V3_SHUTDOWN_DEADLINE = "1 July 2026";

 function V3DeprecationContent() {
   return (
     ...
       <Paragraph variant="extra-small/bright" className="text-amber-300">
-        This is a v3 project. V3 deploys will stop working on 1 April 2026. Full shutdown is 1 July
-        2026 where all v3 runs will stop executing. Migrate to v4 to avoid downtime.
+        This is a v3 project. V3 deploys will stop working on {V3_DEPLOY_DEADLINE}. Full shutdown
+        is {V3_SHUTDOWN_DEADLINE} where all v3 runs will stop executing. Migrate to v4 to avoid
+        downtime.
       </Paragraph>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/webapp/app/components/navigation/SideMenu.tsx` around lines 711 - 712,
The hardcoded dates in the SideMenu JSX ("1 April 2026" and "1 July 2026")
should be extracted to named constants so future updates are easier; declare
constants like V3_DEPRECATION_DATE and V3_FULL_SHUTDOWN_DATE (either at the top
of the SideMenu.tsx module or in a shared constants file) and replace the
literal strings in the component's render/JSX with those constants (e.g., use
{V3_DEPRECATION_DATE} and {V3_FULL_SHUTDOWN_DATE} inside the message) ensuring
any tests or i18n handling are updated accordingly.

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Learnt from: matt-aitken
Repo: triggerdotdev/trigger.dev PR: 3019
File: apps/webapp/app/components/primitives/charts/Card.tsx:26-30
Timestamp: 2026-02-11T16:37:32.429Z
Learning: In projects using react-grid-layout, avoid relying on drag-handle class to imply draggability. Ensure drag-handle elements only affect dragging when the parent grid item is configured draggable in the layout; conditionally apply cursor styles based on the draggable prop. This improves correctness and accessibility.